<template>
	<view class="teacherList">
		<navigator class="item" v-for="dt in lists" :key="dt._id" :url="`/pages/tDetail/index?id=${dt._id}`">
			<view class="topBox">
				<view class="imgbox">
					<cm-image :src="dt.selfAvatar || dt.avatar"/>
				</view>
				<view class="top-con">
					<view class="name">{{dt.name || dt.nickname}}<text class="bzhi">专家</text></view>
					<view class="intro">
						{{dt.company}} | {{dt.industry}} | {{dt.jobs}}
					</view>
				</view>
			</view>
			<view class="zhuangchang" v-if="dt.speciality">
				<view class="t-item" v-for="dt2 in dt.speciality.split('，')" :key="dt">
					<text class="fg">#</text>
					<text>{{dt2}}</text>
				</view>
			</view>
			<view class="pfbox">
				帮助了<text class="txt">0</text>人
				<text class="fgbd"></text>
				评分<text class="txt">5</text>
			</view>
		</navigator>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,computed,getCurrentInstance} from 'vue'
	import cmImage from "@/components/cmImage/index.vue"
	import { useStore } from 'vuex'
	export default defineComponent({
		components:{
			cmImage
		},
		props:{
			lists:Array
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo),
			})
			
			return {
				...toRefs(state)
			}
		}
		
		
	})
</script>

<style lang="scss" scoped>
.teacherList{
	margin: 0;
	a,.item{
		display: block;
		background-color: #fff;
		padding: 20rpx;
		&+.item{
			border-top: 1px solid #f4f4f4;
		}
		.topBox{
			display: flex;
			.imgbox{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;
				flex-shrink: 0;
			}
			.top-con{
				padding: 0 0 0 20rpx;
				flex-shrink: 0;
				height: 0;
				.name{
					display: flex;
					height: 50rpx;
					align-items: center;
					font-size: 30rpx;
					font-weight: bold;
					padding: 0;
					margin: 0;
					.bzhi{
						background-color: #ff1120;
						font-size: 24rpx;
						color: #fff;
						padding: 0 8rpx;
						border-radius: 5rpx;
						margin: 0 0 0 10rpx;
					}
				}
				.intro{
					color: #999;
					font-size: 28rpx;
					height: 50rpx;
					line-height: 50rpx;
					width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
				}
			}
		}
		.zhuangchang{
			padding: 20rpx 0 0 0;
			.t-item{
				font-size: 28rpx;
				color: #333;
				padding: 5rpx 0;
				.fg{
					color: #999;
					font-size: 28rpx;
					font-weight: bold;
					padding: 0 10rpx 0 0;
				}
				
			}
		}
		.pfbox{
			display: flex;
			font-size: 28rpx;
			color: #999;
			padding: 20rpx 0 0 0;
			.txt{
				font-size: 30rpx;
				font-weight: bold;
				color: red;
			}
			.fgbd{
				padding: 0 15rpx;
			}
		}
	}
}
</style>